<template lang="html">
<div class="page has-footer">
  <cube-scroll :options="{scrollbar:{fade: true}}">
    <div class="title-bar">
      <h2>{{info.Title}}</h2>
      <p>{{info.Description}}</p>
    </div>
    <div class="flex bg-white line-top p-md">
      <avatar :src="info.Avatar" class="mr"></avatar>
      <div class="f-body">
        <div class="fs-sm tc-grey">{{info.EmployeeName}}</div>
        <p class="desc">{{info.DeptName}}</p>
      </div>
    </div>
    <tit more-link="" has-bg class="mt-md">相关图片</tit>
    <section class="bg-white ph-md">
      <el-row :gutter="10">
        <el-col :span="12" v-for="(item,index) in pictures" :key="index">
          <g-item  :thum-src="item" ></g-item>
        </el-col>
      </el-row>
    </section>
    <tit more-link="/" has-bg class="mt-md" v-if="false">相关视频</tit>
    <section class="bg-white ph-md" v-if="false">
      <el-row :gutter="10">
        <el-col :span="12" v-for="(item,index) in videos" :key="index" v-if="index>2 && index<5">
          <g-item   is-video></g-item>
        </el-col>
      </el-row>
    </section>
    <tit more-link="" has-bg class="mt-md">处理信息</tit>
    <section class="bg-white ph-md">
      <ul class="msg-list">

        <li class="flex jc-sb" v-for="(item,index) in list" :key="index">
          <avatar :src="item.Avatar" class="mr"></avatar>
          <div class="f-body ">
            <div class="title">{{item.Name}} <span class="tag ml">{{item.DeptName}}</span></div>
            <p class="desc">{{item.CheckTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</p>
            <div class="text-block mt-sm">
              {{item.CheckAdvice}}
            </div>
          </div>
          <div class="btn-lable ml" :class="item.CheckState==0 ? 'bg-orange':'bg-green'">{{item.CheckState==0?"待":"已"}}{{item.StepName}}</div>
        </li>
        <!--<li class="flex jc-sb" v-for="(item,index) in List" :key="index + Math.random()" v-if="index<2">
          <avatar :src="item.Avatar" class="mr"></avatar>
          <div class="f-body ">
            <div class="title">{{item.NickName}} <span class="tag ml">信息部</span></div>
            <p class="desc">{{item.UpdateTime}}</p>
          </div>
          <router-link to="/home/ddcl/2" class="btn-lable bg-orange ml">调度处理</router-link>
        </li>-->
      </ul>
    </section>
  </cube-scroll>
  <footer-bar no-icons>
    <div slot="btns">
      <btn type="primary" @click.native="handle" v-if="info.State==0&&checkinfo&&checkinfo.CheckState==0">提交处理信息</btn>
    </div>
  </footer-bar>
</div>
</template>

<script>
export default {

  data() {
    return {
      list: [],
      id: 0,
      info:{},
      step:{},
      checkinfo:{},
      pictures:[],
      videos:[]
    }
  },
  created () {
    //this.getListData();
    this.id = this.$route.params.id;
    this.getInfo();
    this.getCheckList();
  },
  methods : {
    getListData() {
      this.id = this.$route.params.id
      this.axios.get('https://jason588.github.io/data.json').then((res) => {
        this.List = res.data.List
        this.info = res.data.List[this.id]
      })
    },
    getInfo() {
      this.$http.get("app/Handler/DispatchHandler.ashx?action=Get&Id=" + this.id)
      .then(data => {
        console.log(data);
        if(data.code == 0){
          this.info = data.data;
          this.checkinfo = data.check;
          if(data.data.Pictures != null && data.data.Pictures != ""){
            this.pictures = data.data.Pictures.split(",");
          }
          console.log(this.pictures);
          if(data.data.Videos != null && data.data.Videos != ""){
            this.videos = data.data.Videos.split(",");
          }
        }
      })	 
    },
    getCheckList() {
      this.$http.get("app/Handler/DispatchCheckHandler.ashx?action=GetList&DispatchId=" + this.id)
      .then(data => {
        console.log(data);
        if(data.code == 0){
          this.list = data.data;
        }
      })	 
    },
    handle() {
      this.$router.push('/home/ddcl/'+this.id);	 
    },
  },
}
</script>

<style lang="stylus">
@import "assets/stylus/base"
.msg-list
  li
    align-items: center;
    padding: 10px 0
    + li
      fine-border(top,$border-light)
    .btn-lable
      width: 80px
      text-align: center
      color: $text-dark
      font-size: $font-sm
      background-color: #eee;
      padding: 8px 10px;
    .info-text
      flex: 1
      font-size: $font-sm
      line-height: 1.5
</style>
